<template>
  <div class="same-list">
    <div class="same-list-top">
      <div class="same-list-top-left">
        <span>本类下载排行榜</span>
        <span>同类型下载排行</span>
      </div>
      <!-- <div class="same-list-top-right">
        <span>全部</span>
      </div> -->
    </div>

    <div class="same-list-list">
      <div
        class="same-list-list-it"
        :class="{ actOne: actIndex == i }"
        v-for="(it, i) in data"
        :key="i"
        @mouseover="actIndex = i"
        @click="gotoDetail(it, $router, axios)"
      >
        <div class="it-closed">
          <span :class="'index_' + (i + 1)">{{ i + 1 }}</span>
          <span>{{ it.name }}</span>
        </div>
        <div class="it-open">
          <div class="image">
            <img :src="it.icon" />
          </div>
          <div class="content">
            <div>
              <span>{{ it.size }}</span>
              <div class="stars">
                <el-rate
                  v-model="it.recommendIndex"
                  disabled
                  text-color="#ff9900"
                >
                </el-rate>
              </div>
            </div>
            <div>
              <button
                class="button is-small is-theme-button"
                style="height: 24px"
                @click.stop="downloadUrl(it.highSpeedUrlOne,it.id)"
              >
                下载
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const actIndex = ref(0);

</script>

<style lang="less" scoped>
.same-list {
  display: flex;
  flex-direction: column;

  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #f5f7f8;

  &-list {
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    height: 550px;

    &-it {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      margin: 7.5px 0;
      height: 30px;
    }

    .actOne {
      height: auto;
      .it-open {
        opacity: 1;
        height: auto;
      }
    }

    .it-closed {
      display: flex;
      align-items: center;
      cursor: pointer;

      span:first-child {
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: #f5f7f8;
        border-radius: 4px;
        font-size: 14px;
        font-family: GoogleSans-Medium, GoogleSans;
        font-weight: 500;
        color: #93999e;
        line-height: 14px;
      }

      span:last-child {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d2127;
        line-height: 16px;
      }

      .index_1 {
        background: #f54446 !important;
        color: #fff !important;
      }

      .index_2 {
        background: #f9b002 !important;
        color: #fff !important;
      }

      .index_3 {
        background: #47b752 !important;
        color: #fff !important;
      }
    }

    .it-open {
      display: flex;
      opacity: 0;
      margin: 10px 0px 10px 30px;

      .stars {
        display: inline-flex;
        margin-left: 5px;
        margin-top: -10px;
        color: #f9b002;
        font-size: 13px;
      }

      .image {
        margin-right: 10px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 6px;
        }
      }

      .content {
        display: flex;
        flex-direction: column;
        margin-top: -15px;
        div:first-child {
          span {
            font-size: 14px;
            font-weight: 400;
            color: #545759;
            line-height: 14px;
          }
        }
        div:last-child {
          margin-top: 10px;
        }
      }
    }
  }

  &-top {
    height: 80px;
    background: linear-gradient(
      180deg,
      #558081 0%,
      rgba(142, 183, 183, 0.77) 100%
    );
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: space-between;
    padding: 20px;

    &-left {
      display: flex;
      flex-direction: column;

      span:first-child {
        font-size: 20px;
        font-weight: 600;
        color: #ffffff;
        line-height: 20px;
      }
      span:last-child {
        margin-top: 8px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 14px;
      }
    }

    &-right {
      span {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        line-height: 20px;
      }
    }
  }
}
</style>
